<template>
  <div>  
      <h2>购物车</h2>  
      <div v-for="(item, index) in cartItems" :key="item.id">  
        <h3>{{ item.name }} -价格: {{ item.price }}元-数量: {{ item.quantity }}
        <button @click="addToCart(item)">+</button>  
        <button @click="removeFromCart(item.id)">-</button></h3>
      </div>  
      <p>总价: {{ totalPrice }}元</p>  
    </div>  
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';  

export default {  
  computed: {  
    ...mapGetters(['cartItems', 'totalPrice'])  
  },  
  methods: {  
    ...mapMutations(['addToCart', 'removeFromCart'])  
  }  
}; 
</script>
